<template>
  <div>
    <!-- 客户列表表格 -->
    <vxe-grid
      border
      resizable
      height="500"
      align="center"
      :columns="tableColumn"
      :data="tableData"
      :loading="loading"
    >
      <template #grid_opration="{ row, column, $rowIndex, $columnIndex }">
        <el-button
          v-for="(item, i) in optColumnButtonList"
          :key="'opt_' + row.id + '_' + i"
          type="text"
          @click="
            toolbarButtonCallBack(
              row,
              column,
              $rowIndex,
              $columnIndex,
              item.clickFn
            )
          "
        >
          {{ item.title }}
        </el-button>
        <!-- <vxe-button @click="handleCustomerDetail" size="mini" status="primary"
          >查看</vxe-button
        >
        <vxe-button @click="handleCustomerEdit" size="mini" status="warning"
          >编辑</vxe-button
        >
        <vxe-button size="mini" status="danger">删除</vxe-button> -->
      </template>
      <template #pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :current-page.sync="tablePage.currentPage"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  props: {
    // 表格列
    tableColumn: {
      type: Array,
      default: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'customer_add_time', title: '新增日期', width: 200 },
        { field: 'name', title: '业务员', width: 200 },
        { field: 'customer_name', title: '客户', width: 200 },
        { field: 'customer_main_chat_ways', title: '主要沟通方式', width: 200 },
        { field: '', title: '客户阶段', width: 200 },
        { field: '', title: '跟进状态', width: 200 },
        { field: '', title: '最后跟进时间', width: 200 },
        { field: 'customer_mark_msg', title: '备注', width: 200 },
        {
          field: '',
          title: '操作',
          width: 200,
          fixed: 'right',
          slots: { default: 'grid_opration' }
          // slots: {
          //   default: ({ row }) => {
          //       return [
          //         <div>
          //           <vxe-button size="mini" status="primary" >查看</vxe-button>
          //           <vxe-button size="mini" status="warning">编辑</vxe-button>
          //           <vxe-button size="mini" status="danger">删除</vxe-button>
          //         </div>
          //       ]
          //   }
          // }
        }
      ]
    },
    // 表格数据
    tableData: {
      type: Array
    },
    // 列表中的操作按钮
    optColumnButtonList: {
      type: Array
    },
    // 分页器配置
    tablePage: {
      type: Object
    },
    // 加载中
    loading: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },

  methods: {
    // 列表中的操作按钮触发的回调
    toolbarButtonCallBack(row, column, rowIndex, columnIndex, clickFn) {
      if (clickFn) {
        window.setTimeout(() => {
          clickFn(row, column, rowIndex, columnIndex)
        }, 50)
      }
    },

    handlePageChange({ currentPage, pageSize }) {
      console.log('row  ----->  ', currentPage, pageSize)
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
    }
  }
}
</script>
